<div class="legends-header flex flex-row flex-items-center">
	<i class="iconfont icon-legend1 legends-icon"></i>
	<div class="legends-title">{{'Gis.Legends.title' | translate}}</div>
</div>
<div class="legends-body"
	style="overflow:auto">
	<nz-tree #nzTreeComponent class="user-select"
		[nzData]="treeData"
		nzCheckable
		(nzCheckBoxChange)="select($event)">
		<ng-template #nzTreeTemplate
			let-node>
			<span class="custom-node" style="padding-left:0">
				<div class="node-centent text-ellipsis flex flex-row flex-items-center">
					<!-- incident -->
					<i class="iconfont icon-event" *ngIf="node.origin.icon === 'Incident_Record'"></i>
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/accident.png" alt="" *ngIf="node.origin.icon === 'Accident'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/reverse_flow.png" alt="" *ngIf="node.origin.icon === 'Reverse_Flow'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/roadworks.png" alt="" *ngIf="node.origin.icon === 'Roadworks'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/fire.png" alt="" *ngIf="node.origin.icon === 'Fire'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/bad_weather.png" alt="" *ngIf="node.origin.icon === 'Bad_Weather'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/obstacle.png" alt="" *ngIf="node.origin.icon === 'Obstacle'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/congestion.png" alt="" *ngIf="node.origin.icon === 'Congestion'" />
					<img width="24" style="margin-right: 5px" src="/content/images/icons/incident/road_maintenance.png" alt="" *ngIf="node.origin.icon === 'Road_Maintenance'" />
					<!-- Equipment -->
					<i class="iconfont icon-xingzhuang" *ngIf="node.origin.icon === 'Equipment'"></i>
					<!-- CCTV -->
					<i class="iconfont icon-CCTV" *ngIf="node.origin.icon === 'CCTV'"></i>
					<i class="iconfont icon-CCTV active" *ngIf="node.origin.icon === 'CCTV_Active'"></i>
					<!-- <i class="iconfont icon-CCTV error" *ngIf="node.origin.icon === 'CCTV_Error'"></i> -->
					<i class="iconfont icon-CCTV failed" *ngIf="node.origin.icon === 'CCTV_Failed'"></i>
					<i class="iconfont icon-CCTV out" *ngIf="node.origin.icon === 'CCTV_Offline'"></i>
					<!-- VMS -->
					<i class="iconfont icon-VectorSmartObject" *ngIf="node.origin.icon === 'VMS'"></i>
					<i class="iconfont icon-VectorSmartObject active" *ngIf="node.origin.icon === 'VMS_Active'"></i>
					<!-- <i class="iconfont icon-VectorSmartObject error" *ngIf="node.origin.icon === 'VMS_Error'"></i> -->
					<i class="iconfont icon-VectorSmartObject failed" *ngIf="node.origin.icon === 'VMS_Failed'"></i>
					<i class="iconfont icon-VectorSmartObject out" *ngIf="node.origin.icon === 'VMS_Offline'"></i>
					<!-- VD -->
					<i class="iconfont icon-ziyuan" *ngIf="node.origin.icon === 'VD'"></i>
					<i class="iconfont icon-ziyuan active" *ngIf="node.origin.icon === 'VD_Active'"></i>
					<!-- <i class="iconfont icon-ziyuan error" *ngIf="node.origin.icon === 'VD_Error'"></i> -->
					<i class="iconfont icon-ziyuan failed" *ngIf="node.origin.icon === 'VD_Failed'"></i>
					<i class="iconfont icon-ziyuan out" *ngIf="node.origin.icon === 'VD_Offline'"></i>
					<!-- TSC -->
					<i class="iconfont icon-honglvdeng" *ngIf="node.origin.icon === 'TSC'"></i>
					<i class="iconfont icon-honglvdeng active" *ngIf="node.origin.icon === 'TSC_Active'"></i>
					<!-- <i class="iconfont icon-honglvdeng error" *ngIf="node.origin.icon === 'TSC_Error'"></i> -->
					<i class="iconfont icon-honglvdeng failed" *ngIf="node.origin.icon === 'TSC_Failed'"></i>
					<i class="iconfont icon-honglvdeng out" *ngIf="node.origin.icon === 'TSC_Offline'"></i>

					<!-- Traffic Data -->
					<i class="iconfont icon-daolu-kuaizhuang" *ngIf="node.origin.icon === 'Traffic_Data'"></i>
					<!-- <i class="heavy-traffic" *ngIf="node.origin.icon === 'Heavy_Traffic'"></i>
					<i class="medium-traffic" *ngIf="node.origin.icon === 'Medium_Traffic'"></i>
					<i class="light-traffic" *ngIf="node.origin.icon === 'Light_Traffic'"></i> -->

					<!-- AVL -->
					<i class="iconfont icon-cheliang-" *ngIf="node.origin.icon === 'AVL'"></i>
					<i class="iconfont icon-cheliang- normal" *ngIf="node.origin.icon === 'Normal'"></i>
					<i class="iconfont icon-cheliang- off-line" *ngIf="node.origin.icon === 'Off_line'"></i>

					<!-- ZONE -->
					<i class="iconfont icon-ditu1" *ngIf="node.origin.icon === 'Zone'"></i>
					<!-- CUSTOM ZONE -->
					<i class="iconfont icon-quyu" *ngIf="node.origin.icon === 'User_Define_Area'"></i>

					<span class="file-name">
						{{node.title | translate}}
					</span>
				</div>
			</span>
		</ng-template>
	</nz-tree>
</div>